<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sanjiao</title>
    <style>
        .triangle-up {
            width:0;
            height:0;
            border-left:30px solid transparent;
            border-right:30px solid transparent;
            border-bottom:30px solid #fff;
        }
       /* .triangle-up {
            width:0;
            height:0;
            border:30px solid transparent;
            border-bottom-color:#fff;
        }*/
        .triangle-down {
            width:0;
            height:0;
            border-left:20px solid transparent;
            border-right:20px solid transparent;
            border-top:20px solid #0066cc;
        }
        .triangle-left {
            width:0;
            height:0;
            border-top:30px solid transparent;
            border-bottom:30px solid transparent;
            border-right:30px solid yellow;
        }
        .triangle-right {
            width:0;
            height:0;
            border-top:50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid green;
        }
    </style>
</head>
<body>
<div class="triangle-up">     <!--向上的三角--> </div>
<div class="triangle-down">    <!--向下的三角--> </div>
<!--<div class="triangle-left">    &lt;!&ndash;向左的三角&ndash;&gt; </div>
<div class="triangle-right">    &lt;!&ndash;向右的三角&ndash;&gt; </div>-->
</body>
</html>